<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eclipse Ditto - Sandbox</title>
    <link rel="icon" type="image/png" href="./images/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="./images/favicon-32x32.png" sizes="32x32"/>
    <link rel="icon" type="image/png" href="./images/favicon-96x96.png" sizes="96x96"/>

    <link href="https://fonts.googleapis.com/css?family=Abel&amp;text=0123456789" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        body {
        }

        .ditto-logo {
            width: 3em;
        }

        h1 {
            font-size: 55px;
            color: black;
        }

        body {
            font: 20px Helvetica, sans-serif;
            color: #333;
        }

        a {
            color: #3a8c9a;
            text-decoration: none;
        }

        a:hover {
            color: #333;
            text-decoration: none;
        }

        .stats {
            line-height: 3em;
        }

        .stats-count {
            font: normal 2em Abel;
            color: #3a8c9a;
            font-weight: bold;
            text-align: center;
            margin: 5px;
            clear: left;
            float: left;
            width: 5em;
            background-color: lightgray;
        }

        .stats-count-text {
            padding-left: 1em;
            vertical-align: middle;
        }

        .health {
            background-size: contain;
            height: 30px;
            width: 30px;
            float: left;
        }

        .health-up {
            background-image: url(ditto-sandbox-up.svg);
        }

        .health-down {
            background-image: url(ditto-sandbox-down.svg);
        }

        .health-list li {
            clear: both;
            line-height: 30px;
            padding-bottom: 5px;
        }

        .health-key {
            float: left;
            width: 9em;
        }

        .health-status {
            line-height: 30px;
            padding-left: 1em;
        }
        
        .grafana {
            padding-top: 20px;
        }
    </style>
</head>
<body>

<article>
    <h1><img src="./images/ditto.svg" class="ditto-logo" alt="Eclipse Ditto logo"> - Sandbox</h1>
    <div style="clear: both">
        <p>Welcome to the Eclipse Ditto sandbox.</p>
        <p>
            You can use this sandbox to gather first experiences with the Eclipse Ditto <a href="/apidoc">HTTP
            API</a>.<br/> The Swagger UI for exploring the API will require authentication.
        </p>
        <p>
            Visit the Eclipse Ditto <a href="https://www.eclipse.org/ditto/intro-overview.html">documentation</a> in
            order to learn more about the project.
        </p>
        <p>
            Please consider that this sandbox has (very) limited resources - so don't expect a high performance setup.
        </p>
        <h2>Authentication</h2>
        <p>
            When using the <a href="/apidoc">HTTP API</a> you can authenticate with your Google account in order to use
            an user ID belonging to only you.<br />
            <strong>WARNING</strong>: This currently won't work due to a missing feature
            in swagger-ui 3.x: <a href="https://github.com/swagger-api/swagger-ui/issues/4084">swagger-ui #4084</a> and
            due to a missing feature in Ditto that Google 'accept_token' are not supported:
            <a href="https://github.com/eclipse/ditto/issues/114">Ditto #114</a>.
        </p>
        <p>
            Alternatively (also in order to connect to the WebSocket API) you can use one of the pre-defined user/password
            combinations (which may be used by anyone) and provide them via "basic auth" <span style="font-family: monospace">Authorization</span> header:
        </p>
        <ul>
            <li>demo1:demo</li>
            <li>demo2:demo</li>
            <li>...</li>
            <li>demo9:demo</li>
        </ul>
        <p>
            If you create any entity, either your Google user ID or some of the "basic auth" user's ID will be
            added to that entity in order to authorize you work with it.
        </p>
    </div>
    <h2 style="clear: both">Health</h2>
    <div id="health-content">
    </div>
    <h2>Statistics</h2>
    <div>
        <div class="stats">
            <span id="total-things-count" class="stats-count"></span><span
                class="stats-count-text"> persisted <i>Things</i> in the Ditto sandbox</span>
        </div>
        <div class="stats">
            <span id="hot-things-count" class="stats-count"></span><span class="stats-count-text"> currently "hot" <i>Things</i> (accessed within the last 2 hours) in the Ditto sandbox</span>
        </div>
    </div>
</article>

<script>
    function update_count(selector, count) {
        $(selector).animate({
                                counter: count
                            }, {
                                duration: 3000,
                                easing: 'swing',
                                step: function (now) {
                                    $(this).text(Math.ceil(now));
                                }
                            });
    }

    $.getJSON("/stats/search", function (data) {
        let allThingsCount = data.allThingsCount;
        update_count('#total-things-count', allThingsCount);
    }).fail(function () {
        update_count('#total-things-count', 0);
    });
    $.getJSON("/stats/things", function (data) {
        let hotThings = data.hotThings;
        update_count('#hot-things-count', hotThings);
    }).fail(function () {
        update_count('#hot-things-count', 0);
    });

    function calcHealthStatusClass(status) {
        let healthStatusClass;
        if (status === "UP") {
            healthStatusClass = "health-up";
        } else if (status === "DOWN") {
            healthStatusClass = "health-down";
        } else {
            healthStatusClass = "health-down";
        }
        return healthStatusClass;
    }

    $.getJSON("/status/health", function (data) {
        const keysToIgnore = ['status', 'thing-cache-aware', 'dc-default', 'policy-cache-aware', 'blocked-namespaces-aware'];
        let overallStatus = data.status;
        $(`<p>
            <span class="health-key"></span>
            <span class="health ${calcHealthStatusClass(overallStatus)}"></span>
            <span class="health-status">${overallStatus}</span>
        </p>`).appendTo("#health-content");

        let items = [];
        $.each(data.children, function (idx, child) {
            if (keysToIgnore.includes(child.label)) {
                // ignore
            } else {
                items.push(`<li>
                    <span class="health-key">${child.label}:</span>
                    <span class="health ${calcHealthStatusClass(child.status)}"></span>
                    <span class="health-status">${child.status}</span>
                </li>`);
            }
        });

        $("<ul/>", {
            "class": "health-list",
            html: items.join("")
        }).appendTo("#health-content");
    }).fail(function () {
        $(`<p>
            <span class="health-key"></span>
            <span class="health health-down"></span>
            <span class="health-status">COULD NOT BE DETERMINED</span>
        </p>`).appendTo("#health-content");
    })
</script>
</body>
</html>

